<template>
  <div class="main">
    <div class="header">
      <span style="margin-left: 20px">关键字</span>
      <el-input
        placeholder="请输入关键字"
        v-model="req.keyword"
        style="width: 200px; margin-left: 10px"
        clearable
      ></el-input>
      <el-button
        type="primary"
        style="margin-left: 20px"
        size="small"
        @click="
          req.pageIndex = 1
          getButtons()
        "
      >
        搜索
      </el-button>
      <el-button
        type="success"
        style="margin-left: 20px"
        size="small"
        @click="addVis = true"
      >
        添加按钮
      </el-button>
    </div>
    <el-table
      style="overflow: auto; flex: 0.9"
      :data="res.Items"
      stripe
      border
      highlight-current-row
    >
      <el-table-column type="index" width="40"></el-table-column>
      <el-table-column label="分组">
        <template slot-scope="scope">
          {{ scope.row.APB_Group }}
        </template>
      </el-table-column>
      <el-table-column label="按钮名">
        <template slot-scope="scope">
          {{ scope.row.APB_Name }}
        </template>
      </el-table-column>
      <el-table-column label="背景色">
        <template slot-scope="scope">
          {{ scope.row.APB_BackgroudColor }}
        </template>
      </el-table-column>
      <el-table-column label="Icon">
        <template slot-scope="scope">
          {{ scope.row.APB_Icon }}
        </template>
      </el-table-column>
      <el-table-column label="Icon颜色">
        <template slot-scope="scope">
          {{ scope.row.APB_IconColor }}
        </template>
      </el-table-column>
      <el-table-column label="跳转页面">
        <template slot-scope="scope">
          {{ scope.row.APB_Url }}
        </template>
      </el-table-column>
      <el-table-column label="权限标志">
        <template slot-scope="scope">
          {{ scope.row.APB_AuthorCode }}
        </template>
      </el-table-column>
      <el-table-column  label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native="
              curButton = { ...scope.row }
              editVis = true
            "
            icon="el-icon-edit"
          >
            修改
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="deleteButton(scope.row.APB_ID)"
            icon="el-icon-delete"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%; height: 40px">
      <el-pagination
        layout="total,prev,pager,next,sizes"
        style="float: right"
        background
        :current-page.sync="req.pageIndex"
        :total="res.Total"
        :page-size="req.pageSize"
        :page-sizes="[10, 15, 20]"
        @size-change="
          (val) => {
            req.pageSize = val
            getButtons()
          }
        "
        @current-change="getButtons()"
      ></el-pagination>
    </div>
    <el-dialog title="添加按钮" :visible.sync="addVis" width="500px">
      <el-form label-width="100px" style="margin-top: 20px; width: 90%">
        <el-form-item label="名称">
          <el-input
            placeholder="请输入按钮名称"
            v-model="newButton.APB_Name"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="分组">
          <el-input
            placeholder="请输入按钮分组"
            v-model="newButton.APB_Group"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="背景色">
          <el-input
            placeholder="请输入按钮背景色"
            v-model="newButton.APB_BackgroudColor"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="Icon">
          <el-input
            placeholder="请输入按钮图标"
            v-model="newButton.APB_Icon"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="Icon颜色">
          <el-input
            placeholder="请输入图标颜色"
            v-model="newButton.APB_IconColor"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="跳转页面">
          <el-input
            placeholder="请输入按钮跳转页面"
            v-model="newButton.APB_Url"
            type="textarea"
            rows="3"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="权限标志">
          <el-input
            placeholder="请输入按钮权限标志"
            v-model="newButton.APB_AuthorCode"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="addButton()">新增</el-button>
          <el-button type="text" @click="addVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="编辑按钮" :visible.sync="editVis" width="500px">
      <el-form
        label-width="100px"
        style="margin-top: 20px; width: 90%"
        v-if="curButton"
      >
        <el-form-item label="名称">
          <el-input
            placeholder="请输入按钮名称"
            v-model="curButton.APB_Name"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="分组">
          <el-input
            placeholder="请输入按钮分组"
            v-model="curButton.APB_Group"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="背景色">
          <el-input
            placeholder="请输入按钮背景色"
            v-model="curButton.APB_BackgroudColor"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="Icon">
          <el-input
            placeholder="请输入按钮图标"
            v-model="curButton.APB_Icon"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="Icon颜色">
          <el-input
            placeholder="请输入图标颜色"
            v-model="curButton.APB_IconColor"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="跳转页面">
          <el-input
            placeholder="请输入按钮跳转页面"
            v-model="curButton.APB_Url"
            type="textarea"
            rows="3"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="权限标志">
          <el-input
            placeholder="请输入按钮权限标志"
            v-model="curButton.APB_AuthorCode"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="editButton()">保存</el-button>
          <el-button type="text" @click="editVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  getButtons,
  deleteButton,
  addButton,
  editButton,
} from '@/api/developer/appButton'
export default {
  data: function () {
    return {
      req: {
        keyword: '',
        pageIndex: 1,
        pageSize: 10,
      },
      res: {
        Items: [],
        Total: 0,
      },
      curButton: null,
      newButton: {},
      addVis: false,
      editVis: false,
    }
  },
  methods: {
    getButtons: function () {
      getButtons(this.req).then(({ data }) => {
        this.res = data
      })
    },
    deleteButton(id) {
      deleteButton({ id }).then(() => {
        this.getButtons()
      })
    },
    addButton() {
      addButton(this.newButton).then(() => {
        this.getButtons()
        this.addVis = false
      })
    },
    editButton() {
      editButton(this.curButton).then(() => {
        this.getButtons()
        this.editVis = false
      })
    },
  },
  created: function () {
    this.getButtons()
  },
}
</script>
<style>
.el-drawer.rtl {
  overflow: scroll;
}
</style>
<style scoped>
.header {
  width: 100%;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}
.main {
  flex-direction: column;
  display: flex;
}
.upload-button {
  width: 50px;
  height: 50px;
  background-color: #f3f3f3;
  font-size: 16px;
  color: #5f85f6;
  margin-left: 16px;
  margin-top: 10px;
}
</style>
